<template>
    <view class="select-bottom">
        <view class="price-wrapper">
			<view v-if="getTotalReward.totalPrice >0">
				<view class="text">预计奖励金额：</view>
				<view class="price">{{ getTotalReward.totalPrice }}</view>
				<view class="unit">元</view>
			</view>
			<view v-if="getTotalReward.totalIntegral >0">
				<view class="text">预计奖励积分：</view>
				<view class="price">{{ getTotalReward.totalIntegral }}</view>
			</view>
            
        </view>
        <view class="sure-btn" @click="handleSure">确定</view>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
export default {
    computed: {
        ...mapGetters("sunbathing", ["getTotalReward"]),
    },
    methods: {
        handleSure() {
			this.easyGoBack()
            // this.easyGoTo(`/pages_me/packet/sunbathing/sunbathing`)
        },
    },
}
</script>

<style lang="scss">
.select-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rpx;
    padding: 0 24rpx;
    background: $color-white;
    box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
	position: fixed;
	left: 0;
	bottom: 0;
	width: calc(100% - 48rpx);
    .price-wrapper {
		&>view{
			display: flex;
			align-items: center;
		}
       

        .text {
            font-size: 24rpx;
        }

        .price,
        .unit {
            color: $color-orange-1;
        }

        .price {
            font-size: 40rpx;
            font-weight: 700;
        }

        .unit {
            font-size: 28rpx;
            margin-left: 4rpx;
        }
    }

    .sure-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 240rpx;
        height: 80rpx;
        border-radius: 45rpx;
        background-color: $app-color-main;
        color: $color-white;
    }
}
</style>
